<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row v-show="showSearch">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
          <el-form-item label="订单号" prop="orderCode">
            <el-input placeholder="请输入订单号" v-model="state.queryForm.orderCode" />
          </el-form-item>
          <el-form-item label="客户名" prop="customerName">
            <el-input placeholder="请输入客户名" v-model="state.queryForm.customerName" />
          </el-form-item>
          <el-form-item label="车辆编号" prop="carCode">
            <el-input placeholder="请输入车辆编号" v-model="state.queryForm.carCode" />
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">
              查询
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8" style="width: 100%">
          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
                     v-auth="'qc_carOrder_add'">
            新 增
          </el-button>
          <right-toolbar v-model:showSearch="showSearch" :export="'qc_carOrder_export'"
                         @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
                         @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row>
      <el-table :data="state.dataList" v-loading="state.loading" border
                :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
                @sort-change="sortChangeHandle">
        <el-table-column prop="orderCode" label=" 订单号" show-overflow-tooltip />
        <el-table-column prop="customerName" label=" 客户姓名" show-overflow-tooltip />
        <el-table-column prop="phone" label=" 联系电话" show-overflow-tooltip />
        <el-table-column prop="identityCard" label=" 身份证号" show-overflow-tooltip />
        <el-table-column prop="carCode" label=" 车辆编号" show-overflow-tooltip />
        <el-table-column prop="salePerson" label=" 销售" show-overflow-tooltip />
        <el-table-column prop="saleDate" label=" 售卖日期" show-overflow-tooltip />
        <el-table-column prop="salePrice" label=" 销售价格" show-overflow-tooltip />
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
  </div>
</template>

<script setup lang="ts" name="systemOrder">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { fetchList,getOrderByCustomerId } from "/@/api/qc/carOrder";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useDict } from '/@/hooks/dict';
import { useRoute} from "vue-router";
import { onMounted } from "vue";



// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典
// 定义变量内容
const formDialogRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    orderCode: '',
    customerName: '',
    phone:'',
    identityCard:'',
    carCode: ''
  },
  pageList: fetchList,
  pagination: {
    total: 0,
  }
});

//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields();
  // 清空多选
  // selectObjs.value = []
  getDataList()
};



// 导出excel
const exportExcel = () => {
  downBlobFile('/qc/carOrder/export', Object.assign(state.queryForm, { ids: selectObjs }), 'carOrder.xlsx');
};

//路由跳转接收扈哥的客户Id
const route = useRoute()
watch(
    () => route.query.customerId,
    (customerId) => {
      if (customerId) {
        state.queryForm.customerId=customerId
        getDataList()
      }
    },
    { immediate: true }
)


//获取跳转之后列表
// const getRoute = async () => {
//   const customerId = route.query.customerId as object;
//   if (!customerId) return;
//   console.log(customerId)
//   state.loading = true;
//   try {
//     const res = await getOrderByCustomerId(customerId);
//     Array.isArray(res.data) ? res.data : []
//     state.pagination!.total = res.data?.length || 0;
//   } finally {
//     state.loading = false;
//   }
// };
// //路由监听
// watch(
//     () => route.query.customerId,
//     (newCustomerId) => {
//       if (newCustomerId) {
//         // 重新加载当前客户的订单
//         getRoute();
//       } else {
//         // 恢复默认列表
//         getDataList();
//       }
//     },
//     { immediate: true } // 首次进入也触发
// );
</script>
